<template>
  <a-modal
    :visible="show"
    width="50vw"
    min-height="60vh"
    :bodyStyle="bodystyle"
    title="项目选择器"
    @ok="handleOk"
    @cancel="show = false"
    :maskClosable="false"
    :key="show"
  >
    <a-form-model layout="inline" :model="pagination">
      <div class="filter-container" style="display: flex; justify-content: space-between">
        <div style="display: flex; justify-content: flex-start">
          <a-form-model-item label="查询关键字:" class="searchForm-item">
            <a-input v-model="pagination.keyword"  @keyup.enter="handleSearch"/>
          </a-form-model-item>
          <a-button type="primary" @click="handleSearch" style="height: 38px; margin-right: 5px" :loading="loading"
          >查询
          </a-button>
          <a-radio-group style="margin-top: 8px;margin-left: 20px;" @change="onChangeRadiockResult" v-model="projectType">
            <a-radio value='1'>立项项目</a-radio>
            <a-radio value='2'>孵化项目</a-radio>
          </a-radio-group>
        </div>
        <div style="display: flex; justify-content: flex-end">

        </div>
      </div>
    </a-form-model>
    <div style="height: 55vh; overflow: scroll">
      <a-table
        :loading="loading"
        :columns="projectType == '1' ? columns : hatchColumns"
        :data-source="records"
        :pagination="false"
        rowKey="id"
        :customRow="customRow"
        bordered
        size="small"
      >
      </a-table>
    </div>
    <a-pagination
      show-size-changer
      :default-current="1"
      :total="pagination.total"
      @change="pageChange"
      @showSizeChange="onShowSizeChange"
      :show-total="(total) => `共 ${total} 条记录`"
    />
  </a-modal>
</template>

<script>
  import { getAction, postAction } from '@/api/manage'
  import { formatDate, fermitTime } from '@/utils/util'
  import { ColumnWidthMixin } from '@/views/materials/ColumnWidthMixin'
  import AFormModelItem from "ant-design-vue/es/form-model/FormItem";
  export default {
    mixins: [ColumnWidthMixin],
    name: 'ProjectSelector',
    props: {},
    components: {AFormModelItem},
    data() {
      return {
          bodystyle: {
            height: '70vh',
            overflow: 'hidden',
          },
          userinfo: {
            info: this.$store.getters.userInfo,
            module: 'ProjectSelector',
          },
          dictMap: [],
          records: [],
          searchForm: {},
          powers: {},
          orderNoSuggetions: [],
          loading: false,
          urls: {
            projectSelector: '/home/projectSelector',
            hatchProjectSelector: '/hatchProject/listBySelect'
          },
          projectType: '1',
          hatchColumns: [
            {
              title: '项目编号',
              dataIndex: 'hatchProjectNo',
              width: '120px',
              align: 'center',
            },
            {
              title: '项目编号',
              dataIndex: 'hatchProjectName',
              width: '120px',
              align: 'center',
            },
            {
              title: '项目经理',
              dataIndex: 'leaders',
              width: '110px',
              align: 'center',
            },
          ],
          columns: [
            {
              title: '项目编号',
              dataIndex: 'projectNo',
              width: '120px',
              align: 'center',
            },
            {
              title: '项目名称',
              dataIndex: 'projectName',
              width: '120px',
              align: 'center',
              customCell: () => {
                return {
                  style: {
                    width: this.projectName,
                    overflow: 'hidden',
                    whiteSpace: 'nowrap',
                    textOverflow: 'ellipsis',
                    cursor: 'pointer',
                  },
                }
              },
              customRender: (text, record) => (
                <a-tooltip placement="topLeft" title={record.projectName}>
            {record.projectName}
        </a-tooltip>
    ),
    },
      {
        title: '项目经理',
          dataIndex: 'projectManager',
        width: '110px',
        align: 'center',
      },
    ],
      selectedRowKeys: [],
        selectedRow: [],
        pagination: {
        offset: 0,
          total: 0,
          pageNo: 1,
          pageSize: 10,
          pageSizeOptions: ['10', '20', '30', '40', '50'],
          showTotal: (total, range) => {
          return range[0] + '-' + range[1] + ' 共' + total + '条'
        },
          orderItems: [
          { column: 'startTime', asc: false },
          { column: 'realLevel', asc: true },
        ],
          projectFirstClass: 'Z',
          projectClasses: '',
          projectSubType: '',
          type: null,
          keyword: '',
          hasLevel: '1',
          belongToStatus: null,
      },
      show: false,
        form: {},
      selectedRow: {},
    }
    },
    created() {},
    methods: {
      formatDate,
      fermitTime,
      openInit(form) {
        this.show = true
        this.searchForm = {}
        this.$set(this.pagination, 'pageNo', 1)
        this.records = []
        this.selectedRow = []
        if (form) {
          for (let key in form) {
            this.$set(this.pagination, key, form[key])
          }
        }
        this.handleSearch()
      },
      handleSearch() {
        if (this.loading) {
          return
        }
        if(this.projectType == '1') {
          this.fetchList()
        } else {
          this.fetchHatchProject()
        }
      },
      fetchList() {
        this.loading = true
        postAction(this.urls.projectSelector, this.pagination).then((res) => {
          if (res.success) {
            if (res.result) {
              this.records = res.result.records
              this.$set(this.pagination, 'total', res.result.total)
            }
          } else {
            this.$message.console.error('获取数据错误' + res.message)
          }
          this.loading = false
        })
      },
      fetchHatchProject() {
        this.loading = true
        var param = {
          keyword: this.pagination.keyword,
          projectClass: '10',
          status: 3,
        }
        debugger
        getAction(this.urls.hatchProjectSelector, param).then((res) => {
          if (res.success) {
            if (res.result) {
              this.records = res.result.records
              this.$set(this.pagination, 'total', res.result.total)
            } else {
              this.$message.console.error('获取数据错误' + res.message)
            }
          }
          this.loading = false
        })
      },
      handleClose() {
        this.show = false
      },
      onChangeRadiockResult(obj) {
        this.pagination.keyword = ''
        this.handleSearch()
      },
      handleOk() {
        this.show = false
        debugger
        this.selectedRow.projectType = this.projectType
        this.$emit('close', this.selectedRow)
      },
      customRow(record) {
        debugger
        return {
          on: {
            dblclick: (event) => {
              this.show = false
              this.$emit('close', record)
            },
            click: (event) => {
              this.selectedRow = record
            },
          },
        }
      },
      pageChange(pageNo, pageSize) {
        this.$set(this.pagination, 'pageSize', pageSize)
        this.$set(this.pagination, 'pageNo', pageNo)
        this.handleSearch()
      },
      onShowSizeChange(pageNo, pageSize) {
        this.$set(this.pagination, 'pageSize', pageSize)
        this.$set(this.pagination, 'pageNo', 1)
        this.handleSearch()
      },
    },
  }
</script>

<style lang="less" scoped>
  @import '~@assets/less/hte-main.less';

  .demo-table-expand .a-form-model-item {
    margin-right: 0;
    margin-bottom: 0px;
  }

  .demo-table-expand span {
    display: inline-block;
    white-space: nowrap;
    width: 95%;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .a-form-model-item /deep/ .a-form-model-item--mini .a-form-model-item__label {
    color: #606266 !important;
    font-size: 12px !important;
    font-weight: normal;
  }

  .a-table /deep/ .a-table__expanded-cell[class*='cell'] {
    padding: 0px 0px 10px 0px;
  }

  .expand-title {
    height: 30px;
    line-height: 30px;
    background-color: #f1f1f1;
    padding-left: 50px;
    margin-bottom: 5px;
    font-size: 12px;
  }

  .a-form-model-item /deep/ .a-form-model-item__content {
    height: 36px;
  }

  .ellipse-tooltips {
    display: inline-block;
    white-space: nowrap;
    width: 95%;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .ellipse-tooltips span {
    width: unset !important;
  }

  .a-range /deep/ .a-range-separator {
    width: 20px;
  }

  .searchForm {
    display: flex;
    flex-direction: row;
  }

  .searchForm-left {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    width: 85vw;
  }

  .searchForm-right {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    min-width: 280px;
    border-left: #cccccc 2px solid;
  }

  .bodystyle {
    height: '80vh';
    overflow: 'hidden';
    overflow-y: 'scroll';
  }

  /deep/.ant-table-placeholder {
    height: 54vh !important;
  }
</style>

